<template>
    <div class="topbar">
        <div class="top-navbar">
            <div class="navbar-collapse">
                <ul class="nav nav-first">
                    <li class="nav-item">
                        <a :class="{'nav-link':true,'active' : cls['/mydash']}" href="#/mydash">练习与模考</a>
                    </li>
                    <li class="nav-item">
                        <a :class="{'nav-link':true,'active' : cls['/myanalysis']}" href="#/myanalysis">能力评估报告</a>
                    </li>
                    <li class="nav-item">
                        <a :class="{'nav-link':true,'active' : cls['/mytest']}" href="#/mytest">我的练习</a>
                    </li>
                    <li class="nav-item">
                        <a :class="{'nav-link':true,'active' : cls['/live']}" href="#">直播课</a>
                    </li>
                    <li class="nav-item">
                        <a :class="{'nav-link':true,'active' : cls['/dic']}" href="#">应试宝典</a>
                    </li>
                </ul>
                <ul class="nav nav-second">
                    <li class="nav-item dropdown">
                    <!--
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">头像</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">个人设置</a>
                            <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">我的消息</a>
                            <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">退出</a>
                        </div>
                    -->
                        <el-dropdown trigger="click" @command="handleCommand">
                            <a class="el-dropdown-link nav-link">
                                {{user.Nickname}}
                            </a>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="setting"><a href="#/my">个人设置</a></el-dropdown-item>
                                <el-dropdown-item command="loginout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</template>
<script>
export default {
    data : function(){
        return {
           user : localStorage.getItem("userinfo") ? JSON.parse(localStorage.getItem("userinfo")) : {nickname:'请登录'},
           active : 'active',
           cls : {
                '/quicktest' : false,
                '/myanalysis' : false,
                '/mytest' : false,
                '/mydash' : false
           }
        }
    },
    computed:{
        username : function(){
            let username = localStorage.getItem('ms_username');
            return username ? username : this.name;
        }
    },
    created : function(){
        var self = this
        this.cls[this.$route.path] = true
        if(this.$route.path.match(/\/quicktest/)){
            this.cls['/mydash'] = true
        }
        this.$root.$on("updateHeader",function(userinfo){
            self.user.Nickname = userinfo.Nickname
        })

    },
    methods:{
        handleCommand : function(command) {
            if(command == 'loginout'){
                localStorage.removeItem('ms_username')
                localStorage.removeItem('access_token')
                localStorage.removeItem("userinfo")
                this.$router.push('/login');
            }
        }
    },
    watch : {
        '$route' : function(to,from,next){
            this.cls[from.path] = false
            if(from.path.match(/\/quicktest/)){
                this.cls['/mydash'] = false
            }
            this.cls[to.path] = true
            if(to.path.match(/\/quicktest/)){
                this.cls['/mydash'] = true
            }
        }
    }
}
</script>
